<template>
    <div>
        <admin-container>
            <template v-slot:content>

                <table-plugin
                :page="page"
                :config="testTopicConfig"
                :partOperate="partOperate"
                :globalOperate="globalOperate"
                :searchOperate="searchOperate"
                @part="partOperateActuator"
                @search="searchOperateActuator"
                @global="globalOperateActuator"
                />


            </template>

        </admin-container>

        <el-drawer
        :title="drawer.title"
        :visible.sync="drawer.flag"
        size="60%"
        :wrapperClosable="false"
        @close="$refs['topicRef'].resetFields();topic = {}"
        >
        <div class="drawer-main">
            <el-form label-width="80px" :model="topic" :rules="rules" ref="topicRef">
                <el-form-item label="能测名称" prop="name">
                    <el-input v-model="topic.name" placeholder="能测名称"></el-input>
                </el-form-item>
                <el-form-item label="能测题目" v-if="topic.id!=null">
                
                    <!-- <div style="display: flex;margin-bottom: 10px;justify-content: center;">
                        <el-input v-model="topiceSearch.value" placeholder="查询题目(模糊查询题目)" style="width: 200px;margin-right: 10px;" />
                        <el-button type="primary" size="medium" icon="search">搜索</el-button>
                    </div> -->
                    
                    <test-topice-item :topic="topic" />

            </el-form-item>

            </el-form>
            

            <div class="drawer-btn">
                <el-button type="primary" size="medium" @click="saveOrUpdate">确认提交</el-button>
                <el-button size="medium" @click="drawer.flag = false">取消</el-button>
            </div>
        </div>

        </el-drawer>

    </div>
</template>
<script>
import AdminContainer from '@/components/plugs/admin-container/AdminContainer.vue'
import TablePlugin from '@/components/plugs/table-plugin/TablePlugin.vue'
import TestTopiceItem from './TestTopiceItem.vue'
import {post,get} from '@/utils/api'


export default{
    data(){

        return{
            drawer:{
                title:'',
                flag:false
            },
            topic:{},
            rules:{
                name:[
                    { required: true, message: '能测名称不能为空', trigger: 'blur' }
                ]
            },
            page:{
                current:1,
                size:10,
                total:0,
                records:[]
            },
            topicItemList:[],
            testTopicConfig:{
                columns:[
                    {
                        fixed:false,
                        prop:'id',
                        label:'能测编号',
                        width:'150',
                    },
                    {
                        fixed:false,
                        prop:'name',
                        label:'能测名称',
                        width:'300',
                    },
                    {
                        fixed:false,
                        prop:'totalScore',
                        label:'总分',
                        width:'100',
                    }
                ]
            },
            partOperate:[
                {type:'update',text:'修改',level:'text',color:''},
                {type:'delete',text:'删除',level:'text',color:'red'}
                
            ],
            searchOperate:{
                entity:{},
                condition:[
                    {label:'能测名称',prompt:'查询能测名称(模糊查询)',type:'input',width:'300px',name:'name'}
                
                ]
            },
            globalOperate:{
                left:[
                    {type:'add',text:'发布能测',level:'primary',icon:''},
                    
                ],
                right:[
                ]
            },
           
            topiceSearch:{
                value:''
            }

        }
    },
    methods:{
        partOperateActuator(index,row,operate){
           
      
            switch(operate.type){
                case 'update':
                    
                    this.drawer.flag = true;
                    this.drawer.title = '修改能测信息'
                    this.topic = JSON.parse(JSON.stringify(row));
                    
                    
                    break;
                case 'delete':
                    this.deleteTopice(row);
                    break;   
            }
            

        },
        globalOperateActuator(entity){
            switch(entity.operate.type){
                case 'add':
                    this.drawer.flag = true;
                    this.drawer.title = '新增能测'
                    break;
            }
            

        },
        searchOperateActuator(){
            this.getPage();


        },
        getPage(){

            const promise = get({
                url:'/base-topic/back/test-topic/page',
                params:{
                    current:this.page.current,
                    size:this.page.size,
                    name:this.searchOperate.entity.name
                }
            });

            promise.then(res=>{
                if(res&&res.code === 200){
                    this.page = res.data;
                }
            })


        },
        deleteTopice(row){
            const promise = post({
                url:'/base-topic/back/test-topic/delete',
                data:{
                    id:row.id
                }
            });

            promise.then(res=>{
                if(res.code == 200){
                    this.getPage();
                    this.drawer.flag = false;

                    this.$message.success(res.message);
                    return;
                }

                this.message.error(res.message);
            })

        },
        saveOrUpdate(){
            this.$refs['topicRef'].validate((valid)=>{

                if(valid){

                    const promise = post({
                        url:'/base-topic/back/test-topic/save-or-update',
                        data:{...this.topic}
                    });

                    promise.then(res=>{
                        if(res.code == 200){
                            this.getPage();
                            this.drawer.flag = false;

                            this.$message.success(res.message);
                            return;
                        }

                        this.message.error(res.message);
                    })


                }else{
                    this.$message.error('表单数据校验失败~')
                }
                
            });

        }

    },
    components:{
        AdminContainer,
        TablePlugin,
        TestTopiceItem

    },
    created(){
        this.getPage();
    }
}
</script>

<style scoped>
   .drawer-main{
        padding-left: 20px;
        padding-right: 20px;
        position: relative;
        padding-bottom: 50px;
    }

    .drawer-btn{
        position: fixed;
        bottom: 0;
        padding-bottom: 20px;
    }
</style>